<!--
@description ：消息展示
-->

<template>
  <div class="msgs">
    <div class="mulu">
      <div class="title">
        <div>
          <el-checkbox :checked="checked" @change="checkAllChange" :indeterminate="checkedList.length > 0 && checkedList.length < list.length" style="margin-right: 18px"></el-checkbox>
          <el-button size="mini" type="info" :disabled="checkedList.length == 0">删除</el-button>
          <el-button size="mini" type="info">全部已读</el-button>
        </div>
        <i class="el-icon-plus"></i>
      </div>
      <div class="listInfo">
        <el-checkbox-group v-model="checkedList" style="display: flex;flex-direction: column">
          <el-checkbox v-for="(item, index) in list" :key="index" :label="item.id" class="infoItem">
            <div class="newsTitle" :class="item.status == '0' ? 'noRead' : ''">{{ item.title }}</div>
            <div class="newsInfo">{{ item.info }}</div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="content">
      <div style="font-weight: 500; font-size: 16px;margin-bottom: 6px">机构通知</div>
      <div style="margin-bottom: 20px; font-size: 12px;color:rgb(172, 172, 172);">2024年01月15号</div>
      <div style="font-size: 12px; line-height: 28px">公司各部门： 根据北京市政府办公厅通知精神，现将2024年春节放假安排通知如下：<br>
        <span style="width: 28px;display: inline-block"></span>2月10日至2月17日放假调休，共8天。 <br>
        <span style="width: 28px;display: inline-block"></span>2月4日（星期日）、2月18日（星期日）上班。<br>
        2024年2月10日至2月12日，封闭办公楼，请大家提前做好准备。因工作需要加班人员，请放假前三日将人员名单报到办公室许美丽处(联系电话：137XXXX9727、分机：999)。
        放假之前，请各部门认真做好防火、防盗检查，安排好消防、安全、保卫工作。假期期间注意出行安全。 <br>
        在此，恭祝大家新春快乐！万事如意！</div>
    </div>
  </div>
</template>
<script>

export default {
  name: "msgs", //消息展示
  props:{

  },
  components:{

  },
  data(){
    return{
      checked: false,
      checkedList: [],
      list: [
        {
          id: '1',
          status: '0',
          title: '风险事件下发提醒',
          info: '关于【xxxxxxx】的风险事件已下发到您的邮箱，请注意查收。',
          time: '',
        },
        {
          id: '2',
          status: '1',
          title: '机构通知',
          info: '公司各部门： 根据北京市政府办公厅通知精神，现将2024年春节放假安排通知如下',
          time: '2024年01月15号',
        },
        {
          id: '3',
          status: '1',
          title: '业绩完成通知',
          info: '关于【xxxxxxx】的保单已完成续期收费，请注意查收。',
          time: '',
        },
        {
          id: '4',
          status: '1',
          title: '指标预警提醒',
          info: '您目前的达成率低于机构平均值，请注意。',
          time: '',
        },
        {
          id: '5',
          status: '1',
          title: '质检评价提醒',
          info: '您所在机构及渠道管辖下有*件任务已被评价，请尽快处理。',
          time: '',
        },
        {
          id: '6',
          status: '1',
          title: '交办件下发提醒',
          info: '\'xxx“指派给您一件"交办件"，请尽快处理',
          time: '',
        },
        {
          id: '7',
          status: '1',
          title: '应交期任务超时提醒',
          info: '您所在机构及渠道管辖下有*件保单将失效，请及时处理。',
          time: '',
        }
      ],
    }
  },
  watch:{

  },
  methods:{
    checkAllChange(val){
       console.log('val:::::', val)
      if(val == true){
        this.checkedList = this.list.map(item => item.id)
      }else{
        this.checkedList = []
      }
    }
  },
  mounted() {

  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.msgs{
  display: flex;
  margin-top: 16px;
}

.mulu {
  width: 340px;
  min-height: 500px;
  background: #fff;
  border-radius: 8px;
  margin-right: 16px;
  padding: 12px;
  .title{
    display: flex;
    height: 32px;
    justify-content: space-between;
    align-items: center;
  }
}

.content{
  flex: 1;
  min-height: 500px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}


.infoItem{
  border-bottom: 1px dashed #ccc;
  display: flex;
  align-items: start;
  padding: 12px 0;
  width: 320px;
  .el-checkbox__input{
    margin-top: 2px;
  }
  &:hover{
    background: rgba(67, 140, 255, 0.07);
    cursor: pointer;
  }
}

.newsTitle{
  color: #000;
  font-weight: 500;
  font-size: 14px;
  margin-left: 14px;
  margin-bottom: 6px;
}

.newsInfo{
  color: #ccc;
  font-size: 12px;
  margin-left: 14px;
  width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noRead{
  position: relative;
  &::before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f00;
    position: absolute;
    top: 4px;
    left: -18px;
  }
}
</style>
